<template lang="html">
    <div id="login-page">
        <section class="login-section ng-scope">
            <div class="login-logo">
                <img src="../../img/logo.png">
            </div>
            <p>新华固定资产管理系统</p>
        </section>
        <section class="login-form">
            <div class="login-input">
                <i class="iconUser iconTelephone "></i>
                <input autocomplete="off" value="" name="mobile" class="inputCommon" type="text" placeholder="输入您的手机号" v-model="formName.username" @blur="inputBlur('username',formName.username)">
            </div>
            <div class="login-input">
                <i class="iconUser iconPassword"></i>
                <input autocomplete="off" value="" name="mobile" class="inputCommon" type="password" placeholder="请输入密码" v-model="formName.password" @blur="inputBlur('password',formName.password)">
            </div>
            <div class="input-group">
                <el-checkbox v-model="rememberMe">记住密码？</el-checkbox>
            </div>
            <div class="login-submit">
                <input type="button" @click="submitForm(formName)" @keyup.enter="submitForm()" value="登录">
            </div>
        </section>
    </div>
</template>

<script>
    import axios from 'axios';
    import {
        userLogin
    } from '../../api/api';
    
    export default {
        name: '',
        data() {
            return {
                formName: { //表单中的参数
                    username: '',
                    password: '',
                },
                beDisabled: null,
                rememberMe: false,
                isBtnLoading: false,
                beShow: false //传值给父组件
            };
        },
        created() {
            let auth = JSON.parse(localStorage.getItem('auth'));
            if (auth) {
                this.formName.username = auth.uid;
                this.formName.password = auth.password;
                this.rememberMe = true;
            }
            if(this.formName.password==null){
                 this.rememberMe = false;
            }
           
        
        },
        //方法
        methods: {
            resetForm: function() {
                this.formName.username = '';
                this.formName.password = '';
            },
            submitForm: function(formName) {
                let options = {
                    params: {
                        uid: this.formName.username,
                        password: this.formName.password,
                    }
                };
                userLogin(options).then((res) => {
                    if (res.result === true) {
                        localStorage.setItem('auth', JSON.stringify({
                            uid: this.formName.username,
                        }));
                        if (this.rememberMe) {
                            localStorage.setItem('auth', JSON.stringify({
                            uid: this.formName.username,
                            password: this.formName.password
                            }));
                        }
                        this.$router.push({
                            name: 'Index'
                        })
                    }
                    else if( res.result==false){
                        this.$message.error('提示：账号或密码错误');
                    } 
                })
            },
            inputBlur: function(errorItem, inputContent) {
                if (errorItem === 'uid') {
                    if (inputContent === '') {
                        this.formName.uid = '用户名不能为空'
                    } else {
                        this.formName.uid = '';
                    }
                } else if (errorItem === 'password') {
                    if (inputContent === '') {
                        this.formName.passwordError = '密码不能为空'
                    } else {
                        this.formName.passwordError = '';
                    }
                }
            }
        }, 
    }
</script>

<style lang="scss" scoped>
    .login-section {
        background: url(../../img/login.png) no-repeat;
        width: 100%;
        height: 15rem;
        background-size: 100% 100%;
        text-align: center;
        .login-logo {
            width: 16%;
            padding: 2rem 0% 2%;
            margin: auto;
            img {
                width: 100%;
                height: 100%;
            }
        }
        p {
            font-size: 1.2rem;
            color: #fff;
        }
    }
    
    .login-form {
        background: #fff;
        width: 65%;
        margin: -4rem auto;
        -webkit-box-shadow: 5px 5px 35px 0px #cbd7f5;
        box-shadow: 5px 5px 35px 0px #cbd7f5;
        padding: 35px;
        border-radius: 5px;
        .login-input {
            position: relative;
            border-bottom: 1px solid #d8d8d8;
          //  box-sizing: border-box;
            .inputCommon {
                line-height: 3.5rem;
                font-size: .6rem;
                border: 0;
                background: 0 0;
                overflow: hidden;
                // box-sizing: border-box;
                padding-left: 1.25rem;
                height: 3.5rem;
                color: #333333;
                width: 100%;
                font-size: 1rem;
            }
        }
        .login-submit {
            width: 100%;
            input {
                width: 100%;
                height: 40px;
                background: #6d93f4;
                color: #fff;
                border-radius: 5px;
                border: 1px solid #6d93f4;
                box-shadow: 4px 4px 17px -3px #779bf5;
            }
        }
    }
    
    .iconUser {
        display: block;
        width: .8rem;
        position: absolute;
        left: 0;
        height: 1.5rem;
        top: 15px;
    }
    
    .iconTelephone {
        background: url(../../img/phone.png) no-repeat;
        background-size: 100%;
        background-position: 0px 2px;
    }
    
    .iconPassword {
        background: url(../../img/password.png) no-repeat;
        background-size: 100%;
        background-position: 0px 2px;
    }
    
    .input-group {
        margin: 1rem 0px 2rem 0px;
        float: right;
    }
    
    
    /**/
    
    .is-checked .el-checkbox__inner {
        background-color: #6d93f4 !important;
        border-color: #5a86f7 !important;
    }
</style>
